<template>
  <div>
    <div class="useDraggableV2" ref="useDraggableV2"  :style="style">
      vue2中的使用x:{{x}},y:{{y}}
    </div>
  </div>
</template>

<script>
import { useDraggable } from '@vueuse/core'

export default {
  mounted() {
      const { style, x, y} = useDraggable(this.$refs.useDraggableV2, {initialValue: { x: 400, y: 400 },});
      console.log(style);
      this.style = style;
      this.x = x;
      this.y = y;
  },
  data() {
    return {
      style: undefined,
      x: '',
      y: '',
    }
  },
};
</script>

<style lang="scss" scoped>
.useDraggableV2 {
  padding: 24px;
  background-color: cadetblue;
  height: 50px;
  width: 100px;
  position: fixed;
}
</style>
